import {
  Form,
  Input,
  Button,
  Select,
  Table,
  Pagination,
  Modal
} from 'antd'
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import styles from './index.less'
import { useState } from 'react';
const myTable = () => {
  const searchBox = () => {
    const onFinish = values => {
      console.log('Success:', values);
    };

    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };
    const mdTypeList = [
      { id: 1, name: '元数据类型-1' },
      { id: 2, name: '元数据类型-2' },
      { id: 3, name: '元数据类型-3' },
      { id: 4, name: '元数据类型-4' }
    ]
    const [expand, setExpand] = useState(false);
    const [form] = Form.useForm();
    let initialValues = {
      mdCode: null,
      mdName: null,
      mdPath: null,
      mdType: null
    }
    const showExpand = () => {
      return (
        <>
          <Form.Item className={styles['form-item']} label="上下文路径：" name="mdPath">
            <Input placeholder="请输入上下文路径" />
          </Form.Item>
          <Form.Item className={styles['form-item']} label="元数据类型：" name="mdType">
            <Select showSearch placeholder="请选择元数据类型" optionFilterProp="children"
              filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
            {mdTypeList.map((item, index) => <Select.Option key = { index } value = { item.id }>{ item.name }</Select.Option>)}
            </Select>
          </Form.Item>
        </>
      )
    }
    return (
      <Form className={styles['form']} name="basic" form={form} initialValues={initialValues} onFinish={onFinish} onFinishFailed={onFinishFailed}>
        <Form.Item className={styles['form-item']} label="元数据代码：" name="mdCode">
          <Input placeholder="请输入元数据代码" />
        </Form.Item>
        <Form.Item className={styles['form-item']} label="元数据名称：" name="mdName">
          <Input placeholder="请输入元数据名称" />
        </Form.Item>
        { expand ? showExpand() : '' }
        <div className={styles['form-item']}>
          <Button type="primary" htmlType="submit">查 询</Button>
          <Button className={styles['right-btn']} onClick={() => form.resetFields()}>重 置</Button>
          <a className={styles['right-btn']} onClick={() => setExpand(!expand)}>
            {expand ? '收 缩 ' : '展 开 ' }
            {expand ? <UpOutlined /> : <DownOutlined /> }
          </a>
        </div>
      </Form>
    )
  }
  const tableList = () => {
    const { rows, total } = require('./table.json')
    const columns = [
      {
        title: '元数据代码',
        dataIndex: 'mdCode',
        key: '0',
        ellipsis: true
      },
      {
        title: '元数据名称',
        dataIndex: 'mdName',
        key: '1',
        ellipsis: true
      },
      {
        title: '元数据类型',
        dataIndex: 'modelName',
        key: '2',
        ellipsis: true
      },
      {
        title: '上下文路径',
        dataIndex: 'contextPath',
        key: '3',
        ellipsis: true
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: '4',
        ellipsis: true
      },
      {
        title: '操作',
        key: '5',
        render: () => {
          return (
            <span className={styles['action-btn']}>
              <a>查看</a>
              <a>编辑</a>
              <a>删除</a>
            </span>
          )
        }
      }
    ];
    return (
      <>
      <Table dataSource={rows} columns={columns} pagination={false} />
      <Pagination
        className={styles['pagination']}
        total={total}
        showSizeChanger
        showQuickJumper
        showTotal={total => `总共 ${total} 条`}
      />
      </>
    )
  }
  const [visible, setVisible] = useState(false)
  const modal = () => {
    const handleOk = e => {
      console.log('ok', e);
      setVisible(false)
    };

    const handleCancel = e => {
      console.log('cancel', e);
      setVisible(false)
    };
    return (
      <Modal
          title="Basic Modal"
          visible={visible}
          onOk={(e) => handleOk(e)}
          onCancel={(e) => handleCancel(e)}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
    )
  }
  return (
    <>
    {searchBox()}
    <div className={styles['add-btn']}>
      <Button type="primary" onClick={() => setVisible(true)}>新增元数据</Button>
    </div>
    {tableList()}
    {modal()}
    </>
  )
}
export default myTable
